<template>
	<view class="history-page">
		<view class="invoice-list" v-if="historyList && historyList.length > 0">
			<view v-for="(item, index) in historyList" :key="index" class="invoice-item" @click="openInvoice(item.id)">
				<view class="header">
					<text>申请时间: {{ item.createTime | formatTimes }}</text>
					<text class="status" :class="{isUsed: item.status == 2}">{{ item.status == 2 ? '已开票' : '开票中' }}</text>
				</view>
				<view class="content">
					<view class="info-item">
						<text class="label">开票金额:</text>
						<text class="value">¥{{ item.amount }}</text>
					</view>
					<view class="info-item">
						<text class="label">开票内容:</text>
						<text class="value">{{ item.invoiceContent }}</text>
					</view>
					<view class="info-item">
						<text class="label">发票类型:</text>
						<text class="value">{{ item.invoiceType }}</text>
					</view>
					<!-- <view class="info-item" @tap="openOrder(item.orderId)">
						<text class="label">开票订单:</text>
						<text class="value">{{ item.orderId }}</text>
					</view> -->
				</view>
			</view>
		</view>
			
		<!-- 空状态 -->
		<view class="empty" v-else><u-empty mode="data"></u-empty></view>
		
		<!-- 加载更多 -->
		<u-loadmore v-if="historyList && historyList.length > 0" :status="loadMoreStatus" />
	</view>
</template>

<script>
	import { formatMinutes, formatTimestamp } from '@/utils/index.js';
	export default {
		data() {
			return {
				historyList: [],
				isLoading: false,
				isFinished: false,
				formData: {
					pageNo: 1,
					pageSize: 10
				},
			}
		},
		computed: {
			loadMoreStatus() {
				if (this.isLoading) return 'loading'
				if (this.isFinished) return 'nomore'
				return 'loadmore'
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			getList() {
				if (this.isFinished || this.isLoading) return
				this.isLoading = true
				this.$http_api.getInvoiceHistoryList(this.formData).then(res => {
					let { records, total, current, pages } = res;
					this.historyList = this.formData.pageNo === 1 ? records : [...this.historyList, ...records]
					this.isFinished = current >= pages
					this.formData.pageNo++
				}).finally(() => {
					this.isLoading = false
				})
			},
			
			// 发票详情
			openInvoice(id) {
				uni.navigateTo({
					url: '/pages/order/invoice-detail?id=' + id
				})
			},
			
			// 发票订单
			openOrder(orderId) {
				uni.navigateTo({
					url: '/pages/order/order-detail?id=' + orderId
				})
			}
 		},
		filters: {
			formatTimes(time) {
				if (!time) return '无';
				const data = formatTimestamp(time);
				return data.date + ' ' + data.time
			}
		}
	}
</script>

<style scoped lang="scss">
	.history-page {
		padding: 20rpx;
		
		.invoice-list {
			.invoice-item {
				background: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				font-family: "PINGFANG";
				
				.header {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666;
					margin-bottom: 20rpx;
					font-family: "PINGFANG";
					
					.status {
						color: #2979ff;
						font-family: "PINGFANG";
					}
					
					.isUsed {
						color: #AAAAAA;
					}
				}
				
				.content {
					.info-item {
						display: flex;
						margin-bottom: 10rpx;
						font-size: 26rpx;
						font-family: "PINGFANG";
						
						.label {
							color: #666;
							width: 140rpx;
						}
						
						.value {
							flex: 1;
							color: #333;
							font-family: "PINGFANG";
						}
					}
				}
			}
		}
	}
</style>